<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Sprit</title>
	<style>
		body {
			background: #ddd;
		}
		#canvas {
			position: absolute;
			left: 0;
			top: 20px;
			margin: 20px;
			background: #fff;
			border: thin inset rgba(100,150,230,0.5);
		}
		#readout {
			margin-top: 10px;
			margin-left: 15px;
			color: blue;
		}
	</style>
</head>
<body>
	<div id="readout"></div>
	<canvas id="canvas" width="500" height="200">canvas not supported</canvas>
	<script>
		var canvas = document.getElementById('canvas'),
			readout = document.getElementById('readout'),
			context = canvas.getContext('2d'),
			spritesheet = new Image();

		function windowToCanvas(canvas, canvasbox, x, y) {
			return {
				x: (x - canvasbox.left) * (canvas.width / canvasbox.width),
				clientX: x,
				y: (y - canvasbox.top) * (canvas.height / canvasbox.height),
				clientY: y
			};
		}

		function drawBackground() {
			var VERTICAL_LINE_SPACING = 12,
				i = context.canvas.height;

			context.clearRect(0, 0, canvas.width, canvas.height);
			context.strokeStyle = 'lightgray';
			context.lineWidth = 0.5;

			while(i > VERTICAL_LINE_SPACING) {
				console.log('i', i);
				context.beginPath();
				context.moveTo(0, i);
				context.lineTo(context.canvas.width, i);
				context.stroke();
				i -= VERTICAL_LINE_SPACING;
			}
		}

		function drawSpritesheet() {
			context.drawImage(spritesheet, 0, 0);
		}

		function drawGuidelines(x, y) {
			context.strokeStyle = 'rgba(0,0,230,0.8)';
			context.lineWidth = 0.5;
			drawVerticalLine(x);
			drawHorizontalLine(y);
		}

		function updateReadout(x, y) {
			readout.innerText = '(' + x.toFixed(0) + ',' + y.toFixed(0) + ')';
		}

		function drawHorizontalLine(y) {
			context.beginPath();
			context.moveTo(0, y + 0.5);
			context.lineTo(context.canvas.width, y + 0.5);
			context.stroke();
		}

		function drawVerticalLine(x) {
			context.beginPath();
			context.moveTo(x + 0.5, 0);
			context.lineTo(x + 0.5, context.canvas.height);
			context.stroke();
		}

		canvas.onmousemove = function(e) {
			var canvasbox = canvas.getBoundingClientRect(),
				loc = windowToCanvas(canvas, canvasbox, e.clientX, e.clientY);

			drawBackground();
			drawSpritesheet();
			drawGuidelines(loc.x, loc.y);
			updateReadout(loc.x, loc.y);
		}
		spritesheet.src = 'running-sprite-sheet.jpg';
		spritesheet.onload = function(e) {
			drawSpritesheet();
		}
		drawBackground();
	</script>
</body>
</html>